HTML

常规

HTML的拓展名为html和htm，htm是老的命名规范。
HTML文件直接由浏览器解析执行，无需编译，直接由上而下以此解析执行。

1	<font>内容体</font>

没有内容体的标签叫空标签，仅由一个标签组成，例如：
自关闭。
HTML标签是有属性的，格式为：属性名=”属性值”属性值用引号引起，引号包含单引号和双引号。

块标签

1	<span></span>

行级的块标签，有多少内容就会占用多大空间。不会自动换行，使用户少量数据展示。

1	<div></div>

块级的块标签，默认占满一行，会自动换行，适用于大量数据展示。

表单

<body>
  <!-- 
      表单点击提交按钮，提交数据时。
      ?参数列表
      参数列表格式：
          参数1=参数值1&参数2=参数值2&参数3=参数值3
      
      on表示选中
      ?sex=on

      单选框，用户只能选择，不能输入，指定value属性。否则提交的都是on
      文本框，用户可以自由输入。不一定指定value属性。
  -->
  <form>
    用户名：<input type="text" name="username" /><br>
    密码：<input type="password" name="password" value="123456"><br>
    性别：<input type="radio" name="sex" value="man">男
         <input type="radio" name="sex" value="woman">女
    <br>
    <input type="submit" />
  </form>
</body>

<input/>标签
表单输入项标签之一，用户在该标签上通过填写和选择进行数据的输入。类似于java的Scanner类。
type：设置该标签的种类
text：文本框，默认
password：密码框，内容为非明文
radio：单选框，在同一组内有单选效果
checkbox：复选框，在同一组内有复选效果
submit：提交按钮，用户控制表单提交数据
reset：重置按钮，用于将表单输入项恢复到默认状态
file：附件框，用于文件上传
hidden：隐藏域，一般用作提交服务器需要拿到，但用户不需要看到的数据，如id
button：普通按钮，需要和js事件一起用
表单属性

选择框标签

1	< select></ select>

定义一个选择框

name:设置该标签对应的参数名
multiple:设置该标签选项全部显示,并且可以进行多选提交。默认为单选。

1	<option>< option>

选项标签，用于为一个选择框添加一个选项
value:设置需要提交的参数值。
selected:设置选项的默认选中状态

注意事项：
Option的内容体一般是用来进行展示
参数值应该是 option的value属性值

<select name="aihao" id="1" >
    <option value="游泳">游泳</option>
    <option value="下棋">下棋</option>
    <option value="魔术">魔术</option>
</select>

文本域和文本框的区别
①文本框不能换行，文本域可以
②文本框参数值是value属性，文本域参数值是标签的内容体

from的两个属性：

action:将数据提交到何处
默认提交到本页。
本机内网路径:
相对路径
绝对路径
互联网路径
http://www.baidu.com/xxx
method:将数据以何种方式提交
默认为:get
提交方式可定义:get或者post

Get提交方式特点:把数据拼接到地址栏上
Post提交方式特点：没有把提交数据拼接到地址栏上，请求体

Get和post提交方式区别:
① get提交的参数列表拼接到了地址栏后面
post方式不会拼接地址栏

② get方式提交的数据敏感信息不安全
Post方式提交的数据相对安全

③ get方式提交的数据量有限的
Post方式从理论上提交的数据量无限大

URL编码的表现形式&本质
①你好，进行普通的编码,编码成字节数组【使用的是页面规定的字符集,例如utf-8】
②字节数组中的每一个元素,都会从10进制，转为16进制3把已经转为16进制的字节数组，以%进行拼接拼接出的字符串,就是URL编码后的结果

例如:你好,用UTF8编码，编码的字节数组为:
[-28,-67,-96,-27,-91,-67]

URL编码后:
%E4BD%%A5%BD

CSS

css(Cascading Style Sheets):层叠样式表
层叠:一层一层叠加
样式表:存储样式的地方,多个样式

设置边框的样式
格式:宽度样式颜色
例如: border:1 px solid red ，1像素粗的实线红色边框。
线条样式: solid实线,none无边, double双线

width：用于设置标签的宽度
height：用于设置标签的高度

float

通常默认的排版方式,将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性

格式:
选择器{float:属性值;}
常用属性值:
none:元素不浮动(默认值)
left:元素向左浮动
right:元素向右浮动

注意:因为元素设置浮动属性后，会脱离原有文档流(会脱离原有的板式)，从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整

转换

display属性可以使得元素在行内元素和块元素之间相互转换。

格式:
选择器{display:属性值}
常用的属性值:
block:此元素将显为块元素(块元素默认的display属性值)
inline:此元素将显示为行内元素(行内元素默认的 display属性值)
none:此元素将被隐藏,不显示,也不占用页面空间。

内外边距（盒子模型）

## 外部链接CSS文件

<link/>

又称为链入式，是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中，通过link标签将样式连接到HML文档中

格式:

1	<link rel=”stylesheet" type=”text/css” href=”css文件路径"/>

rel=”stylesheet” , 固定值,表示样式表
type=”text/css” , 固定值,表示css类型
href , 表示css文件位置

JavaScript

JavaScript是WEB上强大的脚本语言。

脚本语言: 无法独立执行。必须嵌入到其他语言中,结合使用。直接被浏览器解析执行。

Java编程语言: 独立写程序,独立运行。编译–执行作用:控制页面特效展示。

例如:
JS可以对HTML元素进行动态控制
JS可以对表单项进行校验
JS可以控制CSS的样式

注意：

JavaScript没有访问系统文件的权限（安全）
由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
JavaScript和java没有任何直接关系

JavaScript的组成

ECMAScript(核心)：规定了S的语法和基本对象
DOM文档对象模型：处理网页内容的方法和接口
标记型文档。HTML
BOM浏览器对象模型：与浏览器交互的方法和接口

JavaScript书写规范

在当前页面内部写 script标签，script内部即可书写 JavaScript代码
格式:

1
2
3

<script type="text/javascript"> 
JavaScript的代码
</script>

注: script标签理论上可以书写在HTML文件的任意位置

外部引入：
在HTML文档中,通过<script src="">标签引入js文件
格式:

1	<script type=”text/javascript”src=”javascript文件路径”></script>

示例1:

1	<script type="text/javascript" src="demo.js"></script>

注：外部引用时 script标签内不能有 script代码，即使写了也不会执行
示例2：

1
2
3

<script type="text/javascript" src="demo. js">
	//这部分代码不会被执行,因为被引入的demo.js代码覆盖 
</script>

script标签的放置位置：
开发规范规定，script标签的放置位置为：Body结束标签前。

变量

变量：标示内存中的一块空间，用于存储数据，且数据是可变的。
变量的声明：
var 变量名; 变量赋子默认值,默认值为 undefined(未定义的)

变量的声明和赋值：
var 变量名=值; 变量赋予对应的值

在声明 JavaScript变量时，需要遵循以下命名规范:

必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如：function
JavaScript严格区分大小写

数据类型

类似于java中的基本数据类型

string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
Boolean 布尔类型。固定值为true和 false
number 数字类型。任意数字
null 空,一个占位符。
undefined 未定义类型,该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。

注：因为 undefined是从null中派生出来的，所以 undefined==null

JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

通过 typeof运算符可以分辨变量值属于哪种基本数据类型。
对变重或值调用 typeof运算符将返回下列值之一：

undefined - 如果变量是 Undefined类型的
Boolean - 如果变量是 Boolean类型的
number - 如果变量是Number类型的
string - 如果变量是String类型的
object - 如果变量是一种引用类型或Null类型的

引用数据类型

引用类型通常叫做类(class)，但在 JavaScript中，因为不存在编译过程,所以没有类的概念，所处理的引用数据类型都是对象

标准创建方式：

1 2	var str= new String(); //和java相同 var str= new String; //js独有的方式

比较运算符

与java基本类似，唯一不同，多了全等符：===

== 逻辑等。仅仅对比值
=== 全等。对比值并且对比类型
如果值和类型都相同，则为true；值和类型有一个不同，则为false

逻辑运算符

运算符	描述	例子
`&&`	and	`(x<10&&y>1)`为true
\|\|	or	(x==5\|\|y==5)为false
`！`	not	`!(x==y)`为true

注：JavaScript逻辑运算符没有&和|

RegExp对象

RegExp对象的创建方式

var reg=new RegExp(“表达式"); (开发中基本不用)
var reg=/^表达式S/ 直接量(开发中常用)
直接量中存在边界，^即代表开始，$代表结束
直接量方式的正则是对象，不是字符串，别用引号

test方法

正则对象.test(string); 用来校验字符是否匹配正则。
全部字符匹配返回true；有字符不匹配返回 false

<script>
  //直接量方式：眼睛里揉不得沙子
  //必须全部字符符合正则，返回true
  //有一个字符不符合正则，就会返回false
  var reg = /^\s*$/;  //0~多个空格

  var flag = reg.test("   a   ");
  alert(flag);
</script>

<script>
  // 普通方式
  // 普通方式。除非全部字符不符合正则，返回false
  // 只要有一个字符符合正则就返回true
  var reg = /\s+/;  //1~多个空格

  var flag = reg.test("aaa");
  alert(flag);
</script>

正则对象使用注意事项

/^表达式$/ 只要有无法成立正则的字符存在，即为 false
全部符合为true
(检查严格,眼睛不揉沙子)
适用于表单校验

/表达式/ 只要有成立正则的字符存在，即为true
全部不符合为 false
(检查不严格,懒人思想)
适用于字符串查找、替换

JS数组对象

JS数组的特性

js数组可以看做Java中的 ArrayList集合。

数组中的每一个成员没有类型限制，及可以存放任意类型
数组的长度可以自动修改

JS数组的四种创建方式

var arr=[1,2,3,”a”,true]; 常用的JS数组。长度5
var arr new Array(); 创建一个数组对象,数组长度默认为0
var arr= new Array(4); 数组长度是4，相当于开辟了长度为4的空间，每个元素是 undefined(仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是 undefined)
var arr= new Array(1,2); 数组元素是1，2

JS数组的常用属性/方法

<script>
  // join(string) 可以将数组每个元素根据分隔符进行拼接，最后返回一个字符串
  // var arr = ['a','b','c','d'];
  // var result = arr.join("+");
  // alert(result);
  // alert(arr.length);//4

  // reverse()     可以将数组进行物理翻转
  // 该方法的返回值    就是翻转成功的新数组
  // 会对当前的数组进行操作，翻转操作
  var arr = ['a','b','c','d'];
  var arr2 = arr.reverse();
  alert(arr2);
  alert(arr);
</script>

<script>
  // pop()      删除并且返回数组的最后一个元素

  var arr = ['a','b','c','d'];
  alert(arr.length);
  var temp = arr.pop();
  alert(temp);
  alert(arr.length);

  // push(需要追加的元素)     向数组的末尾追加一个或者多个元素，返回数组的新长度

  var arr = ['a','b','c','d'];
  // 追加一个元素
  var len = arr.push('e');
  alert(len);
  alert(arr);

  // 追加多个元素
  var len = arr.push('e','f','g');
  alert(len);
  alert(arr);
</script>

eval(String)函数

<script>
  // eval(string)      可以把传入的字符串，作为JavaScript代码
  // 可以扩展程序功能
  // 注意事项：只能传递基本数据类型的字符串，而不能传入字符串对象
  var x = 10;
  eval("var x = 10;");
  eval(new String("var x = 10;"));
  alert(x);
</script>

作用：用于增强程序的扩展性
注：只可以传递原始数据类型string，传递String对象无作用

编码和解码

URL编码：中文及特殊符号 %16进制
作用：保证数据传递的完整性

代码	解释
encodeURI()	把字符串编码为URI
decodeURI()	解码某个编码的URI

<script>
  //javascript
  //encodeURI(string)     就会对字符串进行URI编码，返回值就是编码后的结果
  var msg = "http://www.rainying.com/index.html?username=张三&password=123"
  // alert(msg);
  var temp = encodeURI(msg);
  // alert(temp);

  // decodeURI(string)    就会对字符串进行URI解码，返回值就是解码后的结果
  alert(decodeURI(temp));
</script>

URI和URL的区别
URI是统一资源标识符。标识资源详细名称
URL是统一资源定位器。定位资源的网络位置

资源:可以通过浏览器访问的信息统统称为资源(图片、文本、HTML、CS等等….)

URI标识资源的详细名称，包含资源名。

URL定位资源的网络位置，包含 URLhttp://

例如:

http://www.rainying.com/ 是URL

/a.html 是URl

http: //www.rainying.com/a.html 即是URL，也是URI

字符串转数字

代码	解释
parselnt()	解析个字符串并返回一个整数
parseFloat()	解析一个字符串并返回一个浮点数

parselnt(string);string按照字面值转换为整数类型,小数点后面部分不关注。

parseFloat(string);string按照字面值转换为小数类型。

注:

如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换,仅返回前面正确的转换值。(例如：11.5a55，parseInt结果11，parseFloat结果11.5)
如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN( Not A Number，一个数字类型的标识，表示不是一个正确的数字

<script>
  var str = "10.55";
  var str = "10.55a";
  var str = "10.5a5";
  var str = "1a0.55";
  var str = "a10.55";
  // NaN    (Not A Number)    不是一个数字
  // 是一个数字类型的标识，专门标识当前的值  不是数字
  var num1 = parseInt(str);
  var num2 = parseFloat(str);

  alert(typeof(num1)+":"+num1);
  alert(typeof(num2)+":"+num2);
</script>

自定义函数

函数格式

1
2
3

function 方法名(参数列表){
		函数体
}

JavaScript函数定义必须用小写的 function；
JavaScript函数无需定义返回值类型,直接在 function后面书写方法名；
参数的定义无需使用yar关键字,否则报错；
JavaScript函数体中，return可以不写，也可以return具体值,或者仅仅写return;

函数使用的注意事项

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未 return具体值，返回值为 undefined
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用。
如果形参未赋值，就是用默认值undefined。

自定义对象

function构造函数

我们知道，JavaScript中的引用数据类型都是对象，而对象在 JavaScript中可以用函数来表示。
相当于java中创建某个 class类

无形参格式:

1
2
3

function 对象名(){
	函数体
}

<script>
  // 定义/声明了一个Person对象
  // 定义对象的属性
  // name     age
  // this   ————> 当前的Person对象
  function Person(){
    this.name = "小张"；
    this.age = "18";
  }

  // 创建了一个Person对象，p
  var p = new Person();
  alert(p.name);
  alert(p.age);
</script>

<script>
  // 为属性赋值
  // 1、构造参数赋值
  // 2、创建对象后，调用属性进行赋值
  function Person(n,a){
    this.name = n;
    this.age = a;
  }

  // 创建了一个Person对象，p
  var p = new Person("小王","20");
  alert(p.name);
  alert(p.age);
  p.name = "小李";
  alert(p.name);
</script>

<script>
  // 属性定义方式
  // 1、this关键字，在对象声明定义阶段，定义一个属性
  // 2、创建对象后，使用  对象.属性  方式动态定义属性
  function Person(n,a){
    this.name = n;
    this.age = a;
  }

  //创建了一个Person对象，p
  var p = new Person("小王","20");
  p.sex = "男";   //为Person对象  声明并赋值成功
  alert(p.sex);
</script>

对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”

格式：

1	var 对象名={属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

注:该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象直接使用即可

BOM对象

BOM对象简述

BOM(Browser Object Model)浏览器对象模型
浏览器：IE、火狐、谷歌等
作用：用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)

一般情况下， window代表了BOM对象。
window对象是 JavaScript的内置对象，使用 window对象调用方法时可以省略 window不写。

消息框

alert()
警告框：用来弹出警告消息。

示例：

alert(“你好”);

注：不同浏览器显示的组件样式不同，无需关注。

confirm()
确认框，用于告知用户信息并收集用户的选择
示例1：

confirm(“确定或者取消”);

效果：
示例1

该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。

循环定时器的设置和取消

启动循环定时器- setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

格式：

setInterval(调用方法,毫秒值)
//毫秒值：循环周期

示例：

function run1(){
	alert(“我是run1”);
}

//执行下句后,每隔1秒就会调用一次run1方法 
setInterval (“run1()”,1000);

效果：（每隔一秒就会弹出一次对话框）

<script>
  var id;
  // 需要两秒后执行一次run1方法
  function run1(){
    alert("run1");
    // 执行一次run1方法，清除对应的定时器
    clearInterval(id);
  }

  id = setInterval("run1()",2000);
</script>

启动一次性定时器setTimeout()

一次性定时器,调用一次就会创建并执行一个定时器一次。

格式：

setTimeout(调用方法,毫秒值)

示例：

function run1(){
	alert(“我是run1”);
}
//执行下句后,会设置一个定时器,定时器执行一次。 
setTimeout ("run10", 1000);

<script>
  var id;
  function run1(){
    alert("run1");
  }

  // 希望两秒执行一次run1方法
  var id = setInterval("run1()",2000);

  // 取消一次性定时器
  clearInterval(id);
</script>

location对象

location对象包含浏览器地址栏的信息。

常用属性：

属性	解释
href	设置或返回完整的URL

设置href属性，浏览器就会跳转到对应的路径

1 2	// 设置URL地址 location.href = "demo.html";

DOM对象

DOM对象的简述

DOM (Document Object Model)文档对象模型
文档：标记型文档(HTML等)

DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,
通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

DOM树

其中:

每个标签会被加载成DOM树上的一个元素节点对象。
每个标签的属性会被加载成DOM树上的一个属性节点对象
每个标签的内容体会被加载成DOM树上的一个文本节点对象
整个DOM树，是一个文档节点对象,即DOM对象。
一个HTML文档加载到内存中就会形成一个DOM对像

DOM树的特点:

必定会有一个根节点
每个节点都是节点对象
常见的节点关系：父子节点关系
文本节点对象没有子节点—叶子节点
每个节点都有一个父节点，零到多个子节点
只有根节点没有父节点

获取元素对象的四种方式

在 Java Script中，我们可以通过DOM对象的4种方式获取对应的元素对象：

getElementByld：通过元素ID获取对应元素对象
可以通过ID获取对应的元素对象，如果找不到，返回null
getElementsByName：通过元素的name属性获取符合要求的所有元素
getElementsByTagName: 通过元素的元素名属性获取符合要求的所有元素
getElementsByClassName：通过元素的class属性获取符合要求的所有元素
可以获取到元素节点对象数组；如果找不到，返回空数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <input type="text" id="t1" />

  <input type="checkbox" name="hobby" value="read" />
  <input type="checkbox" name="hobby" value="code" />
  <input type="checkbox" name="hobby" value="run" />

  <ul>
    <li>javaee</li>
    <li>android</li>
    <li>ios</li>
    <li>php</li>
  </ul>

  <script>
    var t1 = document.getElementById("t1");
    alert(t1);
    alert(document.getElementById("t2"));

    // 通过name属性，获取所有需要的元素
    // 返回是一个元素节点对象   数组
    var arr = document.getElementsByName("hobby");
    alert(arr.length);

    // 通过标签名，获取所有需要的元素
    var arr = document.getElementsByTagName("li");
    alert(arr.length);

    // 通过class属性值，获取所有需要的元素
    var arr = document.getElementsByClassName("h1");
    alert(arr.length);
  </script>
</body>
</html>

注：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    //文本框  元素节点对象还没有被加载
    // var t1 = document.getElementById("t1");
    // alert(t1);
  </script>
</head>
<body>
  <input type="text" id="t1" />
  <script>
    var t1 = document.getElementById("t1");
    alert(t1);
  </script>
</body>
</html>

元素对象常见属性

value

元素对象.value 获取元素对象的 value属性值
元素对象.value=属性值 设置元素对象的 value属性值。

<body>
  <input type="text" id="t1" value="你好" />
  <script>
    //需要把t1元素value属性值，拿出来
    var t1 = document.getElementById("t1");
    alert(t1.value);

    //需要修改value属性值     你好么
    t1.value = "你好么";
  </script>
</body>

className

元素对象.className 获取元素对象的 class属性值。
元素对象.className=属性值 设置元素对象的属性值。

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .ys1{
      color: red;
    }
    .ys2{
      color: blue;
    }
  </style>
</head>
<body>
  <span id="s1" class="ys1">今天天气好晴朗</span>
  <script>
    //需要把s1元素的value属性值，拿出来
    var s1 = document.getElementById("s1");
    alert(s1.className);

    s1.className = "ys2";
  </script>
</body>

checked

元素对象.checked 获取元素对象的 checked属性值。
元素对象.checked=属性值 设置元素对象的 checked属性值。

注：HTML中 checked="checked”，JavaScript中返回 true false
修改单选/复选的选中与否

<body>
  <input type="checkbox" id="hobby" />
  <script>
    //false
    var c = document.getElementById("hobby");
    alert(c.checked);

    //想让复选框默认选中
    c.checked = true;
  </script>
</body>

innerHTML

元素对象.innerHTML 获取元素对象的内容体
元素对象.innerHTML=值 设置元素对象的内容体

<body>
  <span id="s1">今天天气好晴朗</span>
  <script>
    //想要获取span的标签的内容体
    var s1 = document.getElementById("s1");
    alert(s1.innerHTML);

    //设置span便签的内容体    今天好像要下雪
    s1.innerHTML="今天好像要下雪";

    //向span标签    追加内容体信息    ，今天0度
    s1.innerHTML += "，今天0度"
  </script>
</body>

JS事件

JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行。
JS事件驱动机制：

事件源
事件
监听器
注册/绑定监听器

事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事情。
监听器：专门处理事件源所产生的事件。
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。

<body>
  <!--
      事件源：按钮
      事件：点击事件    onclick
      监听器：run1()方法
      注册监听器：onclick = "run1()" 
  -->
  <input type="button" value="点我啊" onclick="run1()" />
</body>

点击事件（onclick）

点击事件：由鼠标或热键点击元素组件时触发
示例：

	<script>
		function run1(){
			alert("弹出");
		}
	</script>
</head>
<body>
	<input type="button" value="点我弹出对话框" onclick="run1()" />
</body>

焦点事件（onfocus/onblur）

焦点事件：由鼠标的焦点的有无触发
示例：

获取焦点

<script>
	function run1(){
		alert("获取焦点了");
		}
</script>

1	<input type="text" onfocus="run1()"/>

失去焦点

<script>
	function run1(){
		alert("失去焦点了");
		}
</script>

1	<input type="text" onblur="run1()"/>

域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发
示例：

<select onchange="run1()">
	<option value="bj">北京</option>
	<option value="sh">上海</option>
	<option value="gz">广州</option>
</select>

加载完毕事件（onload）

加载完毕事件：元素组件加载完毕时触发。
获取元素对象，保证元素对象先加载，建议是把获取元素对象放在最后

示例：

<script>
	function run1(){
		alert("弹出")
	}
</script>

1 2	<body onload="run1()"> </body>

表单提交事件(onsubmit)

表单提交事件：表单的提交按钮被点击时触发

注意：该事件需要返回 boolean类型的值来执行提交/阻止表单数据的操作。

事件得到true，提交表单数据
事件得到 false，阻止表单数据提交

示例:

<script type="text/javascript">
  function run1(){
    alert("表单的提交按钮被点击了");
    return true;
  }
</script>

<body>
  <!-- 
      表单提交按钮被点击-------执行run1

      onsubmit  用于表单的校验
      该事件也能够控制表单的提交

      true    允许表单提交
      false   阻止表单提交
  -->
  <form onsubmit="return run1()">
    <input type="text" name="uname" /></br>
    <input type="submit" value="提交" />
  </form>
</body>

键位弹起事件（onkeyup）

键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件
示例：

1	<input type="text" onkeyup="run1()"/>

鼠标移入/移出事件（onmouseover/onmouseout）

鼠标移入事件：鼠标移入/移出某个元素组件时触发
示例：

鼠标移入文本框

1	<input type="text" onmouseover="run1()" />

鼠标移出文本框

1	<input type="text" onmouseout="run1()" />

JS事件的两种绑定方式

元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数。

示例：

<script type="text/javascript">
  function run1(){
    alert("无参函数");
  }
  function run2(){
    alert(str);
  }
  function run3(){
    alert(obj.value);
  }
</script>

<body>
  <!-- 绑定一个无参函数 -->
  <input type="text" value="1111" onclick="run1()" /></br>
  <!-- 绑定一个有参函数，参数就是一个字符串 -->
  <input type="text" value="2222" onclick="run2('传入字符串')" /></br>
  <!-- 绑定一个有参函数，参数是一个元素对象 -->
  <input type="text" value="3333" onclick="run3(this)" /></br>
  <!-- 绑定多个函数 -->
  <input type="text" value="4444" onclick="run1(),run2('传入字符串'),run3(this)" /></br>
</body>

事件句柄绑定方式
优点： ①开发快捷
②传参方便
③可以绑定多个函数
缺点： JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

DOM绑定方式

使用DOM的属性方式绑定事件
示例：

<script>
	function run1(){
		alert("加载完毕");
	}
	//以下两种DOM绑定方式，用哪种都可以
	
	//DOM绑定方式	对象.事件属性	一次只能绑定一个函数，不能传递参数
	window.onload=run1;
	//DOM绑定方式	匿名函数		可以绑定多个函数，可以传递参数
	window.onload=function(){
		run1();
	};
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    function run1(obj){
      alert(t1.value);
    }
    //待窗口全部加载完后，方可用getElementById找到控件
    //进而对控件进行设置点击事件
    window.onload = function(){
      var t1 = document.getElementById("t1");
      t1.onclick = function(t1){
        run1(t1);
      }
    }
  </script>
</head>
<body>
  <input type="text" id="t1" value="1111" />
</body>
</html>